<template>
  <el-dialog
  :before-close="handleClose"
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="checkgroupModel"
      ref="userForm" label-width="80px" label-position="right" size="small">
      <el-tabs type="border-card" v-model="activeTabName" @tab-click="handleClick">
        <el-tab-pane name="checkgroupInfoTab" label="基本信息" class="user-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="编码">
                <el-input v-model="checkgroupModel.code"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称">
                <el-input v-model="checkgroupModel.name"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="适用性别">
                <el-select v-model="checkgroupModel.sex">
                  <el-option label="不限" value="0"></el-option>
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="助记码">
                <el-input v-model="checkgroupModel.helpCode"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明">
                <el-input v-model="checkgroupModel.remark" type="textarea"></el-input>
             </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注意事项">
                <el-input v-model="checkgroupModel.attention" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="检查项信息" name="second">
          <div class="checkScrol">
            <el-table
              height="239"
              ref="multipleTable"
              :data="checkitemModel"
              @selection-change="handleSelectionChange"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="code"
                label="项目编码"
                width="120">
              </el-table-column>
              <el-table-column
                prop="name"
                label="项目名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="remark"
                label="项目说明"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
					</div>
        </el-tab-pane>
      </el-tabs>     
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('userForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listAllCheckitem } from '@/api/checkitem'
import { updateCheckgroup, saveCheckgroup } from "@/api/checkgroup";

export default {
  name: "checkgroup-edit",
  data() {
    return {
      activeTabName: "checkgroupInfoTab",
      loading: false,
      checkgroupModel: {
        checkItems: {}
      },
      checkitemModel: {},
      select: {},
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.checkgroupModel.checkItems = val;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveCheckgroup();
          } else {
            this.doUpdateCheckgroup();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateCheckgroup() {
      updateCheckgroup(this.checkgroupModel.id, this.checkgroupModel)
        .then((response) => {
          this.handleDialogClose();
          this.$emit("save-finished");
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    doSaveCheckgroup() {
      saveCheckgroup(this.checkgroupModel)
        .then((response) => {
          this.handleDialogClose();
          this.$emit("save-finished");
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    handleDialogClose() {
      this.$refs.multipleTable.clearSelection();
      this.activeTabName = "checkgroupInfoTab";
      this.checkgroupModel = {};
      this.checkgroupModel.checkItems = {};
      this.select = {};
      this.dialogProps.visible = false;
    },
    handleClose(done) {
      this.handleDialogClose();
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
    handleClick(tab, event) {
      if(this.select.length!=undefined){
        this.checkgroupModel.checkItems = {};
        this.checkitemModel.forEach((item,index) => {
          this.select.forEach(it => {
            if(item.id==it.id){
              this.$refs.multipleTable.toggleRowSelection(this.checkitemModel[index]);
            }
          });
        });
      }
    }
  },
  mounted: function () {
    listAllCheckitem()
      .then(response => {
        this.checkitemModel = response.data;
      })
      .catch(error => {
        this.outputError(error)        
      })  
    this.$nextTick(() => {
      this.$on("openEditCheckgroupDialog", function (checkgroup,checkitem) {
        this.checkgroupModel = checkgroup;
        this.checkgroupModel.checkItems = checkitem;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改检查组";
        this.dialogProps.visible = true;
        this.select=checkitem;
      });
      this.$on("openAddCheckgroupDialog", function () {
        this.dialogProps.action = "add";
        this.dialogProps.title = "添加检查组";
        this.checkgroupModel = {};
        this.checkgroupModel.checkItems = {};
        this.select = {};
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

